<template>
	<view class="all">
		<view class="ip_tip">
			ip<button size="mini" class="change">切换</button>
		</view>
		<view class="ip_input">
			<input v-model="ip_one" type="number" maxlength="3" class="ip_one"/>
			<text class="point_one">·</text>
			<input v-model="ip_two" type="number" maxlength="3" class="ip_two"/>
			<text class="point_two">·</text>
			<input v-model="ip_three" type="number" maxlength="3" class="ip_three"/>
			<text class="point_three">·</text>
			<input v-model="ip_four" type="number" maxlength="3" class="ip_four"/>
		</view>
		<button @click="ping">ping</button>
	</view>
</template>

<script>
	export default {
		data() {
			var ip_one=ref(0)
			var ip_two=ref(0)
			var ip_three=ref(0)
			var ip_four=ref(0)
			return {
				ip_one,
				ip_two,
				ip_three,
				ip_four
			}
		},
		methods: {
			ping(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.all{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	.ip_tip{
		height: 3rem;
		line-height: 3rem;
		padding-top: 1vh;
		padding-left: 2rem;
		display: inline-block;
		.change{
			background-color: skyblue;
			color: white;
		}
	}
	.ip_input{
		width: 100vw;
		height: 3rem;
		border-bottom: 1px solid gray;
		position: relative;
		.ip_one{
			position: absolute;
			left: 2rem;
			width: 3rem;
			border: 1px solid gray;
		}
		.point_one{
			position: absolute;
			left: 6rem;
		}
		.ip_two{
			position: absolute;
			left: 7rem;
			width: 3rem;
			border: 1px solid gray;
		}
		.point_two{
			position: absolute;
			left: 11rem;
		}
		.ip_three{
			position: absolute;
			left: 12rem;
			width: 3rem;
			border: 1px solid gray;
		}
		.point_three{
			position: absolute;
			left: 16rem;
		}
		.ip_four{
			position: absolute;
			left: 17rem;
			width: 3rem;
			border: 1px solid gray;
		}
	}
}
</style>
